Me gusta el efecto persiana en los menús, uno de los más conocidos es de la librería Mootools con ella ha sido creado "image menu" y los resultados son verdaderamente atractivos.

Pizcos lo aplicó con la librería jQuery y a decir verdad resulta mucho más práctico puesto que son mayoría los que utilizan jQuery para otras rutinas y de esta forma no se ven obligados a usar Mootools.

Hay personas que les gusta este tipo de menú pero desisten de la idea pensando que es algo difícil y no lo es, sino más bien algo laborioso.
Por eso, cuando vi este menú con efecto persiana y creado con CSS pensé que era la solución para aquellos que pisan seguro. Además, al ser creado con CSS nos olvidamos del script y eso nos ahorra complicaciones.
La diferencia entre los otros menús es que el espacio que utiliza para la imagen está dividido en dos partes, uno para la imagen y otro para texto que bien podría ser un título o una breve descripción.

¿Tienes ganas de probarlo? antes de hacerlo es conveniente tener las imágenes que vamos a añadir preparadas, el menú lleva unas imágenes de 82 x 82, lo que haremos será subirlas a una entrada del blog (luego la podemos guardar en borrador o suprimir la entrada conservando imagen, aunque siempre está más segura en borrador)

Para empezar nos situamos en plantilla Edición de HTML buscamos ]]></b:skin> y justo antes añadimos lo siguiente:

/* Menú
---------------------- */
#menu {
margin:0;
padding:0;
width:45em;
height:8.5em;
overflow:hidden;
background:#000;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:#000;
}
#menu li a:hover img {
opacity:1;
}
#menu li a:hover span {
width:11em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
#menu .h3 {
margin:0 5px;
padding:0;
font-size:1.1em;
color:#0aa;
}
.outer {
background:transparent;
font-size:0.9em;
}

Guardamos los cambios y nos dirigimos a la plantilla de diseño donde añadiremos un elemento de página clicando en HTML/Javascript allí añadimos:

<div class="outer">
<ul id="menu">
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3">Texto</b><br />
Breve descripción
</span>
</a>
</li>
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3">Texto</b><br />
Breve descripción
</span>
</a>
</li>
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3">Texto</b><br />
Breve descripción
</span>
</a>
</li>
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3"> Texto</b><br />
Breve descripción
</span>
</a>
</li>
</ul>
</div>

En este mismo elemento de página donde dice "url-imagen" añadimos la url que nos ha generado Blogger en la entrada que creamos. Donde "url-enlace" añadimos la url de la página que vamos a enlazar de forma que coincida la url de la página con la imagen que tenemos asignada.

El texto lo modificamos según viene reflejado, en "Título" escribimos el título, donde "Texto" es un pequeño espacio que podemos aprovechar para añadir otro texto pero sin excederse.

En "Breve descripción" tenemos espacio para unas breves líneas de texto.

Al pasar el puntero sobre la imagen nos muestra un texto que podemos modificar en title="painting" sustituyendo painting por el título a mostrar.

Guardamos y nos dirigimos a plantilla Edición de HTML situándonos en el código que añadimos justo antes de ]]></b:skin>

Podemos cambiar los colores en:

#menu li a:hover {
(Es el fondo de de cada caja donde se incluye imagen y texto)

#menu li a:hover span {
(Color de la fuente "Breve descripción)

#menu .h2 {
(Color de la fuente "Título" )

#menu .h3 {
(Color de la fuente "Texto" )

Podemos variar la opacidad de la imagen al pasar el puntero en:
#menu li a:hover img {
aumentando en opacity:1;

La opacidad de la imagen tal y como la vemos la modificaremos en:
#menu li a img {

El tamaño de fuente en font-size y el tipo de fuente en font-variant.

Fuente: Stu Nicholls, en su página ofrece otros muchos modelos de menús con CSS.

!Suerte¡
Blog de Cesar, ayuda blogger

Holaaaa!!!
Como estas?!! Que bueno está tu blog Gem@.
Ando actualizando gracias a la novedad sobre Google Page. Y no podía dejar de darme una vueltita a saludarte y desearte lo mejor.

A proposito, ta lindo el menú.
Saludos, buena suerte y más que suerte...

Responder
La Blogueria

rebonito, resencillo y reútil.

Responder
Anónimo

Hola Gema, muy atractivo el menu,lo pondre en practica es facil y rapido desde luego, solo un inciso, donde dices que se pueden subir las fotos a una entrada de Blogger en efecto, pero lo de "y luego quitar esa entrada adquiriendo la url de la imagen anteriormente", si quitas la entrada con esas imagenes, en uno o dos dias, Blogger elimina las imagenes apesar de la url, es decir desaparecen del blog, asi que mejor DEJARLAS en un BORRADOR, lo sé por experiencia propia jeje...Saludos

Responder
..NaNy..

Hola Gema me gustaria preguntarte si en esta cosa yo podria poner mis entradas porque ya que dan muy largas por la cantidad. saludos. Por favor si con esto no se puede dime otra cosa que se pueda.

Responder
Gem@

!Hola Cesar¡ que alegría más grande amigo :)
Me pregunté muchas veces qué sería de tu vida, espero que bien. Imagino la tarea tan grande cambiando los archivos de servidor, yo aún no he terminado :( pero poco a poco.
Se te extraña que lo sepas ;)

Responder
Unknown

tengo unas dudas de css en mi blog..
hola como va todo

como veras en la parte superior tengo
una barra con enlaces pero el texto me queda muy lejos de la linea izquierda..utilizo la propiedad pandiing y le pongo lo cuatro parametros pero no me lo respeta

El Oraculo del Beno

te dejo el codigo

.barrademenu li {display: inline;}
.barrademenu li a, .solidblockmenu li a:visited {
float: rigth;
margin: 0;
padding: 0px 5px 0px 0px ;

muchas gracias

Responder
Gem@

¿Qué tal Vane? es un menú muy sencillo y al mismo tiempo da juego para hacerle algunos cambios de esos que nos gustan a nosotras ;)

Hola ..NaNy..este menú como cualquier menú está indicado para enlazar una página o parte especifica del blog, no estaría mal si tuvieras tus entradas etiquetadas y asignaras cada entrada con una categoría.
(Añadiendo las categorías da la sensación de más ordenado, facilita la navegación bastante)
Hay muchos menús vistosos para enlazar las categorías del blog, también se puede crear una nube de etiquetas, incluso optar por la forma que nos las dispone Blogger. Pero en todas es necesario etiquetar las entradas si es que quieres organizarlo un poco.


Anónimo cuando he visto tu comentario me di cuenta que me había expresado mal y lo he corregido pero te explico..
Cuando eliminamos una entrada con imágenes nos aparece un vista previa de la entrada y dice algo así:

"Los siguientes fotos también se pueden suprimir de Blogger. Así se eliminarán de todas las entradas en las que aparezcan. Marca todo lo que desees suprimir.
(Es posible que la eliminación tarde hasta 24 horas)"

Nos muestra una casilla para marcar la imagen, entiendo con esto que si marcamos la imagen la perdemos, pero si no lo hacemos Blogger sigue conservándola independientemente que la tengamos o no, en otra entrada.
Yo creo que si te ha ocurrido y lo sabes por experiencia propia es porque o bien tu blog no tiene esta característica o no te diste cuenta que la tiene de todas formas para más seguridad es mejor guardarlas en borrador ;)

Responder
Gem@



John Doe antes de centrar ese texto del menú hay algunas cosillas que se deberían arreglar como por ejemplo esa sidebar que se desplaza hacia abajo ¿la ves bien con tu navegador?
Yo he probado con Firefox y con Explorer y con las dos se ve igual de desplazada.
Tu header (el espacio del logo y el menú) tiene más anchura que el espacio del blog por eso da la sensación que se pierde en botón de RSP.
Otra cosilla que he visto es que añadiste el código del menú en un lugar que no es apropiado fuera del head (debe estar dentro)
Las medidas que le diste al blog no están bien, me explico..
Añadiste una nueva sidebar y la suma de las entradas y las dos sidebar no debe ser mayor al espacio del blog es por eso que la columna se desplaza.
El header (espacio del logo y menú) mide 1100px; también es mayor que el espacio del blog.
Habría que empezar poco a poco a arreglarlo porque cuantos más cambios le hagas más problemas te irá ocasionando :(
Si quieres mándame la plantilla en formato xml o si lo prefieres te voy guiando como solucionarlo vía e-mail tú decides ;)

Responder
Carlos Pizcos

ups madrina, John llego con un resfriado y vaya diagnostico ☺☺☺....que grande, seguro que ya le has mandado el mail con las correcciones......

Salu2

Responder
Gem@

Hola ahijado :)
Espero que John no se haya asustado, son cosas que descolocan el blog pero muy simples de solucionar ;)

Responder
Anónimo

Gema, aquí estoy en el último pupitre de la fila de aprendices. He encontrado unos blogs con ideas que me gustan, tengo los links del inicio de un blog que quisiera tomar de modelo. Un saludo afectuoso... Fausto.

Responder
Gem@

Fausto te pido mil perdones por la espera, me hiciste sonreír porque precisamente me daba la sensación de tenerte esperando (el el último pupitre)
Cuando quieras mándame esos links por correo y tus ideas y empezamos a poner el blog bien guapo ;)
Abrazos.

Responder
Alexander Dmitrievich

Hola Gem@:
Hablando de CSS y con esto de google pages, me ha surgido una duda, ya que dentro de mi plantilla hay 2 archivos que se dirigen a google pages y son CSS, y cuando abro las direcciones me sale error 404, que sé que quiere decir que ya no está ahí. De todas formas me gustaría preguntarte si hay alguna manera en que se altere mi plantilla en un futuro por culpa de estos archivos.
Que estés bien, un saludo.

Responder
Gem@

Si esos archivos, es decir la url de esos archivos la tienes en tu plantilla te están dando problemas ya mismo Soviet.
Como se trata de un archivo que contiene CSS lo que puedes ver raro son los estilos de "algo" algún efecto que aplicaste, no sé...
Tendría que ver el nombre del archivo para saber que es, normalmente el nombre viene al final de la url.

-No me olvido de lo qu eme pediste de añadir un espacio al final de la sidebar, dame tiempo tengo mucho trabajo pendiente ;(

Responder
Unknown

Hola Gema estupendo blog, observe esta entrada jQuery en donde pizcos y me impresiono.
dime como hacer para que en ves de 4 imágenes sean 16, 4 por linea horizontal. me puedes ayúdar gema

Responder
larefugiada

Hola Gema, me gusta mucho el Menú efecto persiana con CSS, lo quiero colocar en mi pagina principal, lo hice en mi blog de pruebas.
pero Gemita quiero hacerlo para 16 imagenes de la misma forma como me quedo ese.
sera que me puedes ayudar un poquito, dime que tengo que colocar o repetir y en donde.
por fa...si

Responder
Unknown

Bueno ya lo hice y gracias por tu aporte
Blog de prueba

Responder
Gem@

Soliradidad este menú no requiere jQuery no es igual que la que nos ofrece Pizcos, está creado solamente con CSS por lo que es muy sencillo y ligero ya que no requiere alojar scripts externos.
Siento tardar tan to en contestar pero no me ha sido posible antes ;)

Responder
Gem@

Hola Solidaridad ha sido una idea genial ;)

Responder
Unknown

Hola GEMA, estoy trabajando en otro blog y me gusto mucho este menú que ya implemente en el principal. pero te pregunto si conoces un menu igual a este o el mismo en donde se puedan colocar fotos de gran tamaño. gracias GEMA

Responder
Gem@

Hola Solidaridad con Mootool quedan unos menús maravillosos,y las imágenes son de mayor tamaño, mira este ejemplo
Creo que es lo que te mostraba Pizcos si no recuerdo mal, de todas formas el menú creado con CSS quizás pueda adaptarse para imágenes de mayor tamaño.

Responder
_Claudia Amira_

hola gema!!!
primera vez que te escribo pero siempre te leo
sabes??
me encanto el menu
pero tengo una duda
me gustaria que en vez de ser el link directo sobre la foto se abrieran los laterales donde dice titulo, tecto, descripcion...
como si fuese un menu con muchos enlaces
y poder poner distintas opciones de enlace
yo intente y no pude
:(

sera posible??
gracias y eres una genia!!!!

Responder
Gem@

Hola Claudia, la solución es sustituir el texto por enlaces, algo así...
<a href="url-de-la-página">título</a>
De esa forma el texto que se muestra es el enlace ;)

Responder
@ZULMAROQUE

Hola gema, es muy util tu blog, deseo un menu como el que tienes arriba .... busque muchos manuales y sigo todos los pasos, pero que pasa si siempre mencionan ubicar las etiquetas /b:includable (cerrado)
/b:widget(cerrado)? (en todo mi codigo html no se encuentran, ¿que hago si no viene mi plantilla? todos los manuales lo mencionan ... a lo mucho encontre b:widget (solo abieto)pero cierra con
/b:section ... y ni luces de la etiqueta /b:includable, ni siquiera existe a palabra "includable" en todo el html .... que hacer? ... estoy usando una plantilla simple y no tiene widgets instalados para que se complique ... si tienen respuestas gracias ... (no me deja poner los signos <...> correctos aqui ... pero los escribi bien las etiquetas con sus apertura y cierre ) gracias si puede contestarme ... pero porque yo no tengo esas etiquetas?

Responder
@ZULMAROQUE

espero que se haya entendido el problema... micodigo html raro:

http://www.esnips.com/nsdoc/351be3cc-e723-4d3e-9db1-abc20eecf582/?action=forceDL

y este es el tutorial que segui y los demas son iguales todos mencionan la etiquetas que me faltan
http://elescaparatederosa.blogspot.com/2007/03/men-en-forma-de-pestaas-en-blogger.html

Gracias, estoy revisando con mucho interes tus escritos


pd: como se llama ese efecto que rotar de tu seccion "Blogs Ganadores" y como se hace para poner mas de 5 feeds de ultimos comentarios (a mi solo me dejo poner 5 y tu tienes 9

Responder
Gem@

Vamos por partes...
No sé a qué blog te refieres porque vi que tienes 4 pero si tu plantilla es como dices la simple (Minima) los códigos están ahí seguro, solo tienes que marcar para expandir la plantilla y los verás más de los que quisieras ver :O

Otra cosa.. este menú es con CSS no hace falta expandir la plantilla si lees detenidamente y sigues los pasos verás que encuentras el código fácilmente.

Otra aclaración, no hay que confundir etiquetas con menú, al menú le añades a mano los enlaces que tu quieras, con las etiquetas de pestañas se hace automáticamente y para eso requiere encontrar esos códigos que dices no tener.

Ese efecto de los blogs ganadores es un s croll puedes ver como crearlo aquí:
Scroll de imágenes con enlace

Los últimos comentarios los tengo con un script.
Últimos comentarios

Responder
Allan Fixnet Uster

Linda amiga Gem@ salvou meu novo blog querida!Te amo!Beijos açucarados da Taillard Maravilha.

Obrigada!!!

Responder
Gem@

:: Obrigada Taillard :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top